<%@page import="bean.dianzan" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>ajax</title>
    <style>
        .article{
            border: 1px solid coral;
            height: 250px;
            width: 500px;
        }
        .thumbup{
            color: darkgray;
            cursor: pointer;
        }
        .thumbupNum{
            color:lightsalmon;
        }
    </style>
</head>
<body>
<div class="article" id="1">
    <h5>静夜思</h5>
    <p>床前明月光，</p >
    <p>疑是地上霜。</p >
    <p>举头望明月，</p >
    <p>低头思故乡。</p >
    <span class="thumbup" active="false">赞</span><!--active是自定义属性-->
    <span class="thumbupnum"></span>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    var id = $(".article").attr("id")
    console.log("id",id);
    $.ajax({
        url:"/toSelect",
        data:{"id=":id.toString()},
        type:"post",
        dataType:"JSON",
        success:function (result) {
            $(".thumbupnum").text(result.thumbupnum)

        }
    })
    var ifCancelThumbup;
    $(".thumbup").click(function () {
        if($(".thumbup").attr("active")=="false"){
            $(".thumbup").css("color","coral");
            $(".thumbup").attr("active","true")
            ifCancelThumbup = "false";
        }else if ($(".thumbup").attr("active")=="true"){
            //改颜色
            $(".thumbup").css("color","darkgray");
            //点赞次数+1
            var num = $(".thumbsupNum").text();
            $(".thumbsupNum").text(Number(num)-1);
            //改变active属性的值
            $(".thumbup").attr("active","false")

            ifCancelThumbup = "true";
        }
        $.ajax({
            url:"/toClickThumbup",
            data:{"ifCancelThumbup":ifCancelThumbup,"id":id.toString()},//存入request域，servlet通过req.getParameter获取
            type:"post",
            dataType:"JSON",
            success:function (result) {
                //服务器传来的result是JSON数据，该数据由Article对象转换而来
                $(".thumbupnum").text(result.thumbupnum);
            }
        })
    })
</script>
</html>